<template>
    <div>
        <el-form-item label="渐变方向">
            <el-select v-model="data.options.direction">
                <el-option value="left" label="向左"/>
                <el-option value="right" label="向右"/>
                <el-option value="top" label="向上"/>
                <el-option value="bottom" label="向下"/>
            </el-select>
        </el-form-item>
        <el-form-item label="颜色1">
            <el-color-picker
                v-model="data.options.color1"
            />
        </el-form-item>
        <el-form-item label="颜色2">
            <el-color-picker
                v-model="data.options.color2"
            />
        </el-form-item>
        <el-form-item label="链接颜色">
            <el-color-picker
                v-model="data.options.linkColor"
            />
        </el-form-item>
        <el-form-item label="title默认值">
            <el-select filterable allow-create v-model="data.options.titleDefaultValue" @change="changeTransValue($event, 'titleDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="数字1默认值">
            <el-select filterable allow-create v-model="data.options.item1NumDefaultValue" @change="changeTransValue($event, 'item1NumDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="描述1默认值">
            <el-select filterable allow-create v-model="data.options.item1DescDefaultValue" @change="changeTransValue($event, 'item1DescDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="数字2默认值">
            <el-select filterable allow-create v-model="data.options.item2NumDefaultValue" @change="changeTransValue($event, 'item2NumDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="描述2默认值">
            <el-select filterable allow-create v-model="data.options.item2DescDefaultValue" @change="changeTransValue($event, 'item2DescDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="数字3默认值">
            <el-select filterable allow-create v-model="data.options.item3NumDefaultValue" @change="changeTransValue($event, 'item3NumDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="描述3默认值">
            <el-select filterable allow-create v-model="data.options.item3DescDefaultValue" @change="changeTransValue($event, 'item3DescDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="头像地址">
            <el-select filterable allow-create v-model="data.options.avatarDefaultValue" @change="changeAvatarValue($event, 'avatarDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
        <el-form-item label="标题字体大小">
            <el-input style="width: 180px;" v-model="data.options.titleFontSize"/>
        </el-form-item>
        <el-form-item label="链接字体大小">
            <el-input style="width: 180px;" v-model="data.options.linkfontSize"/>
        </el-form-item>
        <el-form-item label="链接地址">
            <el-input style="width: 180px;" v-model="data.options.linkValue"/>
        </el-form-item>
        <el-form-item label="链接内容默认值">
            <el-select filterable allow-create v-model="data.options.linkDefaultValue" @change="changeTransValue($event, 'linkDefaultValue')">
                <el-option v-for="(item, dictIndex) in selectDict" :key="dictIndex" :value="item.code" :label="item.name"/>
            </el-select>
        </el-form-item>
    </div>
</template>
<script>
export default {
    name: 'AvatarCard',
    props: {
        data: {
            type: Object
        },
        selectDict: {
            type: Array
        }
    },
    methods: {
        changeValue(e) {
            let obj = {}
            obj = this.selectDict.find((item) => {
                return item.code === e
            })
            console.log(obj)
            this.data.options.defaultValue = obj.code || obj.name
            this.data.options.defaultValueCName = obj.name
        },
        changeTransValue(e, key) {
            console.log(key)
            console.log(e)
            let obj = {}
            obj = this.selectDict.find((item) => {
                return item.code === e
            })
            if (obj) {
                this.data.options[key] = obj.code
                this.data.options[key + 'CName'] = obj.name
            } else {
                this.data.options[key + 'CName'] = this.data.options[key]
            }
        },
        changeAvatarValue(e, key) {
            let obj = {}
            obj = this.selectDict.find((item) => {
                return item.code === e
            })
            if (obj) {
                this.data.options[key] = obj.code
            } else {
                this.data.options[key] = e
            }
        }
    }
}
</script>
